<script setup>
import {defineProps,ref,watch,onMounted} from "vue";
import UserViewFavorites from "@/views/UserView/Components/UserViewFavorites.vue";
import VideoCard from "@/views/index/components/VideoCard.vue";
import {favoriteApi} from "@/apis/favoriteApi.js";
import {useRoute, useRouter} from "vue-router";
import HorizonVideoCard from "@/components/horizonVideoCard/horizonVideoCard.vue";
import User from "@/utils/User/User.js";


const route = useRoute();
const router = useRouter();

const props = defineProps({
  modelValue:{
    type:Boolean,
    required:true,
  }
})
const emit = defineEmits(['update:modelValue','openLoginDialog']);

const userInfo = ref({});

// 更新值的方法
const updateValue = (flag) => {
  emit('update:modelValue', flag);
};

const openLoginDialog = ()=>{
  emit('open-login-dialog',true)
}


// 获取用户信息
const getUserInfo = async () => {
  if( User.isLogin() ){
    try {
      const res = await User.getUserInfo();
      userInfo.value = res;
    } catch (e){
      console.error(e)
      ElMessage.error('获取用户信息失败')
    }
  }
}

const naviToUserPage = (view)=>{
  const query = {
    view: null
  };
  if(view === 'favorites'){
    query.view = 'favorites'
  }
  router.push({
    name: 'user',
    params: {
      userid: userInfo.value.userid,
    },
    query
  })
}

const logout = ()=>{
  User.logout();
  router.go(0);
}

onMounted(()=>{
  getUserInfo();
});
</script>

<template>
  <div class="user-info-dropdown" :class="{ 'dropdown-visible': props.modelValue}"
       @mouseenter="updateValue(true)"
       @mouseleave="updateValue(false)"
  >
    <div class="user-name-box">
      用户{{userInfo.userid}}
    </div>
    <div class="user-info-box">
      <div class="user-info-item">
        <h3>{{userInfo.follows_num}}</h3>
        <span>关注</span>
      </div>
      <div class="user-info-item">
        <h3>{{userInfo.fans_num}}</h3>
        <span>粉丝</span>
      </div>
      <div class="user-info-item">
        <h3>{{userInfo.userDynamics_num}}</h3>
        <span>动态</span>
      </div>
    </div>
    <div class="user-action-list">
      <div class="user-action-item" @click="naviToUserPage">
        <span><el-icon><Avatar/></el-icon> 个人主页</span>
        <el-icon><ArrowRight/></el-icon>
      </div>
      <div class="user-action-item" @click="router.push({name:'platform.home'})">
        <span><el-icon><MessageBox /></el-icon> 创作中心</span>
        <el-icon><ArrowRight/></el-icon>
      </div>
      <div class="user-action-item" @click="naviToUserPage('favorites')">
        <span><el-icon><StarFilled /></el-icon> 收藏</span>
        <el-icon><ArrowRight/></el-icon>
      </div>
      <el-divider></el-divider>
      <div class="user-action-item" @click="logout">
        <span><el-icon><DArrowLeft /></el-icon> 退出登录</span>
        <el-icon><ArrowRight/></el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-info-dropdown{
  position: absolute;
  top: calc(100% + 10px) ;
  right: -150%;
  width: 400%;
  //height: 300px;
  background-color: #fff;
  color: black;
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  overflow: hidden;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 20px;

  .user-info-box{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    .user-info-item{
      margin:0 10px ;
    }
  }

  .user-action-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    .user-action-item{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: #424242;
      border-radius: 10px;
      transition: all 0.2s ease;

      &:hover{
        background-color: #e1e1e1;
      }
    }
  }
}
.dropdown-visible{
  visibility: visible;
  opacity: 100;
}
.el-divider{
  margin: 2px 0;
}
</style>
